<script>
function add(a, b) {
  return a + b;
}
</script>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import Child1 from "./Child1";
import Child2 from "./Child2";
import Child3 from "./Child3";

const countRef = ref(100);

function addCount() {
  countRef.value++;
}

const state = reactive({
  name: "steve",
});
const { name } = toRefs(state);

console.log(add(10, 20));

function onChange(info) {
  console.log("on change", info);
}

function onDelete(info) {
  console.log("on delete", info);
}

const child3Ref = ref(null);

onMounted(() => {
  // 拿到 Child3 组件的一些数据
  console.log(child3Ref.value);
  console.log(child3Ref.value.a);
  console.log(child3Ref.value.b);
});

</script>

<template>
  <div>
    <p @click="addCount">{{ countRef }}</p>
    <p>{{ name }}</p>

    <child-1></child-1>
    <hr />

    <child-2
      :name="name"
      :age="countRef"
      @change="onChange"
      @delete="onDelete"
    ></child-2>
    <hr />

    <child-3 ref="child3Ref"></child-3>

  </div>
</template>
